<template>
	<view class="container">
		<tui-loading v-show="!pageData.loading"></tui-loading>
		<view class="page" v-show="pageData.loading" :style="{marginTop:header.init.height+'px'}">
			<!--header-->
			<tui-navigation-bar @init="initNavigation" @change="changeNavigation" :title="header.title"
				:color="tui.getColorSite().title.color" :backgroundColor="tui.getColorSite().title.backgroundColor"
				:splitLine="header.splitLine" :isOpacity="header.isOpacity" :maxOpacity="header.maxOpacity"
				:transparent="header.transparent" :scrollTop="header.scrollTop" :scrollRatio="header.scrollRatio"
				:isCustom="header.isCustom" :isImmersive="header.isImmersive" :isFixed="header.isFixed"
				:backdropFilter="header.backdropFilter" :dropDownHide="header.dropDownHide" :zIndex="header.zIndex">
				<view class="tui-header-icon" :style="{top:header.init.top+'px'}">
					<tui-icon name="arrowleft" :color="tui.getColorSite().title.color" @click="back"></tui-icon>
				</view>
			</tui-navigation-bar>
			<view style="margin: 19rpx 0;">
				<tui-section size="24rpx" color="#999999" background="#fff" :title="'当前查询时间:'+pageData.search_date"
					@click="detail('showDateTime')"></tui-section>
			</view>
			<view>
				<u-cell-group>
					<u-cell v-for="(item, index) in pageData.listData" :key="index">
						<view slot="title">
							<view class="flex-b">
								<view class="flex">
									<view>{{ item.name }}</view>
								</view>
								<view class="flex">
									<tui-tag type="green">{{ item.value }}</tui-tag>
								</view>
							</view>
						</view>
					</u-cell>
					<view class="footerbox">
						<view class="footerboxx">
							<text class="nums">750</text>
							<text class="footerText">我的积分</text>
						</view>
						<view class="footerboxx">
							<text class="nums">3459.6</text>
							<text class="footerText">加速积分</text>
						</view>
						<view class="footerboxx">
							<text class="nums">0</text>
							<text class="footerText">我的分红</text>
						</view>
						<view class="footerboxx">
							<text class="nums">0</text>
							<text class="footerText">服务费</text>
						</view>
					</view>
				</u-cell-group>

			</view>

			<tui-picker :show="pageData.picker.show" :pickerData="pageData.picker.itemList" @hide="pickerHide"
				@change="pickerChange">
			</tui-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				get: {},
				header: {
					title: '业绩中心', //NavigationBar标题
					splitLine: true, //是否需要分割线
					isOpacity: false, //是否设置不透明度
					maxOpacity: 1, //不透明度最大值 0-1
					transparent: false, //背景透明 （设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效）
					scrollTop: 0, //滚动条滚动距离
					scrollRatio: 0.3, //isOpacity 为true时生效（opacity=scrollTop /windowWidth * scrollRatio）
					isCustom: false, //是否自定义NavigationBar内容
					isImmersive: true, //是否沉浸式,
					isFixed: true, //是否固定
					backdropFilter: false, //是否开启高斯模糊效果[仅在支持的浏览器有效果]，为true时maxOpacity设置小于1的值
					dropDownHide: false, //下拉隐藏NavigationBar，主要针对有回弹效果ios端
					zIndex: 9998, //z-index值
					init: {
						width: 0,
						height: 0,
						left: 0,
						top: 0,
						top: 0,
						scrollH: 0,
					},
				},
				pageData: {
					loading: false,
					search_date: '',
					listData: [],
					picker: {
						show: false,
						itemList: [],
					},
				},
				appInit: {},
				user: {},
			}
		},
		// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onLoad(e) {
			let that = this;
			// uni.startPullDownRefresh();
			console.log("self:onLoad++++++++++++++++++++++++++++++++++++++++++++++++++");
			uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			if (typeof(e.scene) != 'undefined') {
				e = that.tui.getUrlkey(decodeURIComponent(e.scene));
			}
			that.get = e;
			if (typeof that.get.title !== 'undefined') {
				that.header.title = that.get.title;
				if (that.header.title.length > 13) {
					that.header.title = that.header.title.slice(0, 13) + '...';
				}
				that.$forceUpdate();
			}
			console.log("self:getData=>", that.get);
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: function(res) {
					that.header.init.width = obj.left || res.windowWidth;
					that.header.init.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					that.header.init.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					that.header.init.scrollH = res.windowWidth * 0.6;
				}
			});
			that.$forceUpdate();
			that.initialize();
		},
		// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			let that = this;
		},
		// 监听页面滚动，参数为Object
		onPageScroll(e) {
			let that = this;
			that.header.scrollTop = e.scrollTop;
			that.$forceUpdate();
		},
		methods: {
			initialize() {
				let that = this;
				let Int = setInterval(function() {
					that.user = that.tui.getCache("user");
					console.log('self:user=>', that.user);
					if (typeof(that.user) == 'object') {
						clearInterval(Int);
						that.__init();
					}
				}, 800);
			},
			async __init() {
				let that = this;
				that.appInit = that.tui.getCache("appInit");
				console.log('self:appInit=>', that.appInit);
				let response = '';
				response = await that.tui.get('/user/performance/center');
				that.pageData.search_date = response.data.search_date;
				that.pageData.listData = response.data.data;
				that.pageData.picker.itemList = response.time_site;
				that.pageData.loading = true;
				that.$forceUpdate();
			},
			async detail(type, item = {}) {
				let that = this;
				console.log(type, item);
				switch (type) {
					case 'showDateTime':
						that.pageData.picker.show = true;
						break;
					default:
						break;
				}
				// that.tui.urlHref(item.url + '?' + that.tui.initParamsData(item.param || {
				// 	timestamp: that.tui.formatDate().timestamp
				// }));
			},
			pickerHide() {
				let that = this;
				that.pageData.picker.show = false;
				that.$forceUpdate();
			},
			async pickerChange(e) {
				let that = this;
				let response = await that.tui.get('/user/performance/center', {
					search_date: e.text
				});
				that.pageData.search_date = response.data.search_date;
				that.pageData.listData = response.data.data;
				// that.pickerHide();
				that.$forceUpdate();
			},
			initNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
				that.header.top = e.top;
				that.$forceUpdate();
			},
			changeNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
				that.$forceUpdate();
			},
			back() {
				let that = this;
				that.tui.urlBack(1);
			},
		},
		// 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
		onReachBottom() {
			let that = this;
		},
		// 监听页面隐藏
		onHide() {
			let that = this;
		},
		// 监听页面卸载
		onUnload() {
			let that = this;
		},
		// 页面返回
		onBackPress() {
			let that = this;
		},
		// #ifdef MP
		onShareAppMessage() {
			// console.log('分享!')
		},
		// #endif
	}
</script>

<style scoped lang="scss">
	.footerbox {
		display: flex;
		justify-content: space-around;
		.footerboxx{
			margin-top: 31rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.nums{
				color: #36B184;
				font-size: 36rpx;
			}
			.footerText{
				color: #999999;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>